<!--
 * @Author: FightWz
 * @Date: 2019-10-11 11:16:11
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-10-23 09:02:54
 * @Description: FightWz
 -->
<template>
  <div class="i-regions">
    <div class="i-regions-con">
      <Select
        style='width:200px'
        v-model='provinceCode'
        placeholder='全部'
        @on-change='changeProvince'
      >
        <Option
          v-for='item in provinceList'
          :value='item.id'
          :key='item.id'
        >{{ item.name }}</Option>
      </Select>
      <!-- <div
        class="tm-mil-line-loading"
        v-if="province && !cityList.length"
      ><img
          src="../assets/loading.gif"
          alt=""
        ></div> -->
      <div
        v-if="cityList.length"
        class="i-regions-city"
      >
        <div>
          <Checkbox
            :indeterminate="indeterminate"
            v-model="checkAll"
            @click.prevent.native="handleCheckAll"
          >全选</Checkbox>
        </div>
        <CheckboxGroup
          v-model="checkCity"
          @on-change="checkAllGroupChange"
        >
          <Checkbox
            v-for='item in cityList'
            :key='item.id'
            :label="item.id"
          >{{item.name}}</Checkbox>
        </CheckboxGroup>
        <Button
          @click="saveCity"
          type="primary"
          size="small"
        >确定</Button>
      </div>
    </div>
    <p
      v-if="checkCityList.length > 0"
      style="margin: 20px 0 0;"
    >已选择的地区</p>
    <!-- <div
      class="tm-mil-line-loading"
      v-if="waiting"
    ><img
        src="../assets/loading.gif"
        alt=""
      ></div> -->
    <div class="i-regions-cityList">
      <div
        v-for="(item, index) in checkCityList"
        :key="index"
        class="i-regions-cityItem"
      >
        <span class="provinceName">{{item.province.name}}</span>
        <span
          v-for="city in item.city"
          :key="city.id"
          class="cityName"
        >{{city.name}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import regions from '@/config/regions';
export default {
  data() {
    return {
      provinceCode: '', // 当前的省编号
      provinceList: [], // 省列表
      cityList: [], // 城市列表
      checkCity: [], // 当前省所选的市列表  -- 展示
      checkCitySave: {},
      checkCityList: [],
      indeterminate: false,
      checkAll: false,
      waiting: false, // loading
      Municipality: [{ id: 2, name: '北京' }, { id: 3, name: '天津' }, { id: 10, name: '上海' }, { id: 23, name: '重庆' }, { id: 2, name: '北京' }] // 直辖市
    };
  },
  created() {
    this.getOrigin();
  },
  methods: {
    // 获取省级数据
    getOrigin() {
      this.provinceList = regions.map(v => {
        return {
          id: v.province.id,
          name: v.province.name
        };
      });
    },
    // 返回省名称
    provinceFilter(id) {
      return this.provinceList.filter(item => item.id === id)[0].name;
    },
    // 更改省
    changeProvince(parentId) {
      if (!parentId) return;
      this.indeterminate = false;
      this.checkAll = false;
      // this.handleCheckAll();
      this.checkCity = [];
      this.cityList = [];
      this.cityList = regions.filter(v => v.province.id === parentId)[0].city;
      this.checkCityList.forEach(v => {
        if (v.province.id === parentId) {
          this.cityList.forEach(m => {
            if (v.city.find(n => n.id === m.id)) {
              this.checkCity.push(m.id);
            }
          });
        }
      });
    },
    // 保存所选的当前市
    saveCity() {
      // 处理选择不同省，保存当前省已选择的投放城市
      if (!this.checkCity.length) return;
      // 已选中的省份
      const province = regions.filter(v => v.province.id === this.provinceCode)[0].province;
      // 已选中的城市
      const cityArray = [];
      // 当前选择的城市code
      this.checkCity.forEach(v => {
        const Obj = this.cityList.filter(el => el.id === v)[0];
        cityArray.push(Obj);
      });
      // 新增、修改
      const isCheck = this.checkCityList.filter(v => v.province.id === province.id)[0];
      if (isCheck) {
        this.checkCityList.forEach(v => {
          if (v.province.id === province.id) {
            v.city = cityArray;
          }
        });
      } else {
        this.checkCityList.push({
          province: province,
          city: cityArray
        });
      }
      console.log(this.checkCityList);
    },
    // 全选
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;
      if (this.checkAll) {
        this.checkCity = this.cityList.map(v => {
          return v.id;
        });
      } else {
        this.checkCity = [];
      }
    },
    checkAllGroupChange(data) {
      if (data.length === this.cityList.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    }
  }
};
</script>
<style lang="less">
.i-regions {
  &-city {
    margin: 10px 0;
    .ivu-checkbox-wrapper {
      margin: 0 15px 10px 0;
    }
  }
  &-cityItem {
    padding: 5px 0;
    span {
      font-size: 13px;
      margin-right: 10px;
      &.provinceName {
        color: #3399ff;
      }
      &.cityName {
        color: #999;
      }
    }
  }
}
</style>